<template>
  

    <div class="bg-white mt-20px rounded-8px">
      <div class="px-20px py-30px">
          <div class="flex justify-between">
            <div class="w-500px"><el-progress :stroke-width="12" striped :duration="duration" striped-flow :percentage="percent" /></div>
            <div class="300px flex justify-center">
                <div class="font-600 text-16px text-dark-500">知识点：{{total}}个 / </div>
                <div class="text-16px font-600 text-red-500">已复习：{{complete}}个</div>
            </div>
          </div>
          <div class="p-10px mb-20px text-16px text-gray-500 border border-1px border-gray-300 border-left-0 border-top-0 border-right-0 "></div>
          <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">
              <el-table-column prop="plan_date" label="时间" width="180" />
              <el-table-column prop="content" label="复习知识点内容" width="380" >
                  <template #default="{ row }">
                      <div class="text-left" v-html="formatContent(row.content)"></div>
                  </template>
              </el-table-column>
  
              <el-table-column prop="status" label="完成情况" />
              <el-table-column label="复习/答题">
                <template #default="{ row }">
                    <el-button size="small" @click="goBook(row)">
                    去复习
                    </el-button>
                    <el-button
                    size="small"
                    type="danger"
                    @click="goExam(row)"
                    >
                    去做题
                    </el-button>
                </template>
              </el-table-column>
          </el-table>
          <div class="text-center mt-30px"><el-pagination class="justify-center" @current-change="handleCurrentChange" :hide-on-single-page="true" background layout="prev, pager, next" :total="total" /></div>
      </div>
      
    </div>
  </template>
  
  <script setup>
      import { systemApi,userApi,httpApi } from '../../api/api'
      import { configStore } from '../../stores/config'
      import { diffTwoDates,getToday } from '../../utils/tool'
      import { ElMessage, ElMessageBox,ElLoading  } from 'element-plus'
      import { ref,onMounted,watch } from "vue"
      import { useRouter } from 'vue-router'
      const router = useRouter()
      const config = configStore()
      const lessonData = ref({})
      const total=ref(0)
      const complete=ref(0)
      const percent=ref(0)
      const currentPage = ref(1)
      const duration = ref(0)
  
      const tableData = ref([])
      const formatContent = (text) => {
          return text.replace(/\n/g, '<br>');
          };
      const init = async()=>{
          lessonData.value = config.getBook()
          let params = lessonData.value
          params.type = "all"
          params.page = currentPage.value

          let res = await httpApi.getDayTask(params)
              if(res.code){
                  tableData.value = res.data.needChapter
                  tableData.value.forEach(item=>{
                      item.status = item.status == 0?"未完成":"已完成"
                  })
                  total.value = res.data.total
                  complete.value = res.data.complete
                  percent.value = res.data.percent
                  duration.value = res.data.percent / 25
              }
  
          }
        
        const handleCurrentChange = (value)=>{
            currentPage.value = value
            init()
            //console.log("当前第几页",value)
        }

    const goBook = (row)=>{
        console.log("数据",row.teaching_id)
        config.setCurrentOpen({teaching_id:row.teaching_id})
        router.push({path:"/book/book/1"})
    }

    const goExam = (row)=>{
        console.log("数据",row.teaching_id)
        config.setCurrentOpen({teaching_id:row.teaching_id})
        router.push({name:"PointExamDetail",query:{type:1,section_id:row.teaching_section_id}})
    }
  
      // 科目变化时加载
      watch(() => config.$state.currentBook.book_id, () => {
        init()
      })
      onMounted(()=>{
        init()
      })
  
  </script>
  <style scoped>
      ::v-deep .el-table .cell{
          text-align: center!important;
      }
  </style>
  